<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- html <head>标签部分  -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>客户下单</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css">
    <script src="/bootstrap/jquery/jquery-2.1.3.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/jquery.bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/localization/messages_zh.js"></script>

    <style type="text/css">
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            clear: both;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $(".mealImplementTime").click(function () {
                WdatePicker();
            });

            $("#saveform").click(function () {
                var myDate = new Date();
                var FullYear = myDate.getFullYear();
                var Month = (myDate.getMonth() + 1);
                var Date1 = myDate.getDate();
                var Hours = myDate.getHours();
                var Minutes = myDate.getMinutes();
                var Seconds = myDate.getSeconds();
                var myBillnum = FullYear + "" + Month + "" + Date1 + "" + Hours + "" + Minutes + "" + Seconds;

                $("#orderBillNum").val(myBillnum);
                var username = $("#username").val();
                var userTelphone = $("#userTelphone").val();
                var mealImplementTime = $("#mealImplementTime").val();
                var mealImplementAddress = $("#mealImplementAddress").val();

                if ($("#mealType option:selected").val() == 1) {
                    $('#fee').val(6666);
                }
                if ($("#mealType option:selected").val() == 2) {
                    $('#fee').val(8888);
                }
                if ($("#mealType option:selected").val() == 3) {
                    $('#fee').val(11111);
                }
                if ($("#mealType option:selected").val() == 4) {
                    $('#fee').val(22222);
                }
                if ($("#mealType option:selected").val() == 5) {
                    $('#fee').val(66666);
                }
                var fee = $('#fee').val().toString();
                //alert($('#fee').val().toString())

                if (username == null || username == "" || userTelphone == null || userTelphone == "" ||
                        mealImplementTime == null || mealImplementTime == "" || mealImplementAddress == null || mealImplementAddress == "") {
                    $.messager.alert("温馨提示", "当前您还有选项未选择, 请选择后再提交");
                } else {
                    $("#billForm").ajaxSubmit({
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                $.messager.alert("温馨提示", "提交成功! 您牢记您的订单编号:" + myBillnum + ",订单待支付:" + fee + ".00元")

                                window.location.href = "orderBill_list?username="+username;
                            }
                            else {
                                $.messager.popup("提交失败");
                            }
                        }
                    })
                }
            });
        })
    </script>
</head>
<body>

<div class="container">

<div class="row">
    <div class="col-md-12" style="background-color: #ffd65f; padding-bottom: 3px"" align="center" >客户订单</div>
</div>

<div style="padding-left:10px; padding-right:10px">
    <div align="center">
        <form class="form-inline" action="/billsave" method="post" id="billForm">
            <input type="hidden" class="form-control" id="orderBillNum" name="orderBillNum">
            <input type="hidden" class="form-control" id="fee" name="fee">

            <div class="form-group" style="width: 100%;padding-bottom: 5px;padding-top: 5px" align="left">
                <label for="username" align="left">客户姓名</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="必填"
                       style="background-color: #eefbbb">
            </div>
            <div class="form-group" style="width: 100% ;padding-bottom: 5px" align="left">
                <label for="userTelphone" align="left">联系电话</label>
                <input type="text" class="form-control" id="userTelphone" name="userTelphone" placeholder="必填"
                       style="background-color: #eefbbb">
            </div>
            <div class="form-group" style="width: 100% ;padding-bottom: 5px" align="left">
                <label for="mealImplementTime" align="left">服务时间</label>
                <input type="text" class="form-control mealImplementTime" id="mealImplementTime"
                       name="mealImplementTime" placeholder="必填" style="background-color: #eefbbb">
            </div>
            <div class="form-group" style="width: 100% ;padding-bottom: 5px" align="left">
                <label for="mealImplementAddress" align="left">服务地点</label>
                <input type="text" class="form-control" id="mealImplementAddress" name="mealImplementAddress"
                       value="${location!''}" placeholder="必填" style="background-color: #eefbbb">
            </div>
            <div class="form-group" style="width:100%; padding-bottom: 5px" align="left"
                 style="background-color: #eefbbb">
                <label for="mealType" align="left">套餐类型</label>
                <select class="form-control" id="mealType" name="mealType" style="background-color: #eefbbb">
                    <option value="1">套餐1:包你满意</option>
                    <option value="2">套餐2:棠下扛把子</option>
                    <option value="3">套餐3:天河陈浩南</option>
                    <option value="4">套餐4:广州铜锣湾</option>
                    <option value="5">套餐5:私人订制</option>
                </select>
            </div>
            <script type="text/javascript">
                $(function () {
                    $("#mealType option:selected");
                    $('#mealType').change(function () {
                        if ($("#mealType option:selected").val() == 1) {
                            $('#meal1').html("1.套餐价格:6666元");
                            $('#meal2').html("2.服务质量:想你所想,包你满意");
                            $('#meal3').html("3.服务范围:棠下");
                        } else if ($("#mealType option:selected").val() == 2) {
                            $('#meal1').html("1.套餐价格:8888元");
                            $('#meal2').html("2.服务质量:想你所想,包你满意");
                            $('#meal3').html("3.服务范围:广州");
                        } else if ($("#mealType option:selected").val() == 3) {
                            $('#meal1').html("1.套餐价格:11111元");
                            $('#meal2').html("2.服务质量:想你所想,包你满意");
                            $('#meal3').html("3.服务范围:全国");
                        } else if ($("#mealType option:selected").val() == 4) {
                            $('#meal1').html("1.套餐价格:私人订制A");
                            $('#meal2').html("2.服务质量:不必怀疑");
                            $('#meal3').html("3.服务范围:随你定制");
                        } else if ($("#mealType option:selected").val() == 5) {
                            $('#meal1').html("1.套餐价格:私人订制B");
                            $('#meal2').html("2.服务质量:不必怀疑");
                            $('#meal3').html("3.服务范围:随你定制");
                        }
                    })
                })
            </script>

            <div class="form-group" style="width: 100%" align="left">
                <label for="userTelphone" align="left">套餐详情</label>
                <p>
                    <span id="meal1" class="text-info" align="left">1.套餐价格:6666元</span><br>
                    <span id="meal2" class="text-info" align="left">2.服务质量:想你所想,包你满意</span><br>
                    <span id="meal3" class="text-info" align="left">3.服务范围:棠下</span>
                </p>
            </div>
            <div class="form-group" style="width: 100% " align="left">
                <label for="remark" align="left">留言备注</label>
                <input type="text" class="form-control" id="remark" name="remark">
            </div>
        </form>

        <button type="button" class="btn btn-info" id="saveform">提交订单</button>

    <div style="padding-left: 10px;padding-right: 10px">

       <#-- <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
            用户须知
        </button>-->
    <#-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                             aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" id="myModalLabel">用户下单须知</h4>
                 </div>
                 <div class="modal-body">
                     <p><h4 align="center">特别提示</h4></p>
                     广州滴滴打XX有限公司（以下简称“滴滴打XX”）在此特别提醒您（用户）在下单成为之前，请认真阅读本《用户下单协议》（以下简称“下单协议”），
                     确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。本协议约定滴滴打XX与用户之间关于“滴滴打XX”服务权利义务。
                     <p align="left">一、服务内容</p>
                     <p>
                         1、本服务的具体内容由滴滴打XX根据实际所选套餐和签订的合法合同确定。
                         2、用户可以通过付费方式购买相关服务，具体方式为：用户通过网上银行、支付宝或其他“滴滴打XX”平台提供的付费途径支付一定数额的人民币购买“滴滴打XX”平台的虚拟货币——滴滴打XX币.
                     </p>
                     <p align="left">二、法律责任</p>
                     <p>
                         1、如果滴滴打XX发现或收到他人举报或投诉用户违反本协议约定的，滴滴打XX有权不经通知随时对相关内容，包括但不限于用户资料、聊天记录进行审查、删除，并视情节轻重对违规帐号处以包括但不限于警告、帐号封禁
                         、设备封禁 、功能封禁 的处罚，且通知用户处理结果。
                         2、用户理解并同意，滴滴打XX有权依合理判断对违反有关法律法规或本协议规定的行为进行处罚，对违法违规的任何用户采取适当的法律行动，并依据法律法规保存有关信息向有关部门报告等，用户应承担由此而产生的一切法律责任。
                         3、用户理解并同意，因用户违反本协议约定，导致或产生的任何第三方主张的任何索赔、要求或损失，包括合理的律师费，用户应当赔偿滴滴打XX与合作公司、关联公司，并使之免受损害。
                     </p>
                     <p align="left">三、免责条款</p>
                     <p>具体详情, 请拨打客服:400-888-666</p>
                     <p align="left">四、其他</p>
                     <p>具体参见书面协议</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" id="readButton" class="btn btn-primary">我已阅读</button>
                 </div>
             </div>
         </div>
     </div>

     <script type="text/javascript">
         $("#readButton").click(function () {
             var count = 0;
             var timer = window.setInterval(function () {
                 count++;
                 $("#readButton").html((10 - count) + "秒后关闭");
                 $("#readButton").attr('disabled', true);
                 if (count == 10) {
                     window.clearInterval(timer)
                     $("#myModal").hide();
                     window.location.reload();
                 }

             }, 1000) //设置的计时器时间
         });
     </script>

 </div>-->

    </div>
    </div>
</div>
</body>
</html>